<template>
	<view class="page-content">
		<!--状态 + 标题-->
		<!-- #ifdef MP-WEIXIN -->
		<w-nav-statu-bar :statu_bar_h="statusBarHeight" :nav_bar_h="navHeight" type="address" fontc="#fff"
			statu_bar_bg="#02BB6F" nav_bar_bg="#02BB6F" :city="city" @tocity="tocity">
		</w-nav-statu-bar>
		<!-- #endif -->
		<scroll-view class="page-content2" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<view class="index-header">
				<!--轮播图-->
				<view class="header-swiper">
					<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current"
						:mode="mode" :dots-styles="dotsStyles" field="content">
						<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
							<swiper-item v-for="(item, index) in info" :key="index">
								<view :class="item.colorClass" class="swiper-item">
									<image class="image" :src="item.url" mode="aspectFill" />
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
				<!--导航-->
				<view class="nav">
					<view class="nav-item" @click="handleActive(1)"
						:class="[active === 1 ? 'active' : active === 2 ? '' : active === 3 ? '' :active === 4 ? '':'']">
						当前比赛
					</view>
					<view class="nav-item" @click="handleActive(2)"
						:class="[active === 1 ? '' : active === 2 ? 'active' : active === 3 ? '' :active === 4 ? '':'']">
						往期回顾
					</view>
					<view class="nav-item" @click="handleActive(3)"
						:class="[active === 1 ? '' : active === 2 ? '' : active === 3 ? 'active' :active === 4 ? '':'']">
						赛事介绍
					</view>
					<view class="nav-item" @click="handleActive(4)"
						:class="[active === 1 ? '' : active === 2 ? '' : active === 3 ? '' :active === 4 ? 'active':'']">
						关于我们
					</view>
				</view>
			</view>
			<view class="page-body">
				<!--当前比赛-->
				<view class="body-item" v-if="active=== 1">
					<template v-if="datalist1 && datalist1.length > 0 ">
						<block v-for="(item,index) in datalist1" :key="index">
							<race-list :img="item.image " :title="item.title" :time="item.game_start_time"
								:sign_statu="item.status" statu="2" @click="clickdet(item.status,item)"
								@signUp="signUp(item.status,item)"></race-list>
						</block>
						<!-- 上拉加载 -->
						<view class="det-con-more">
							<load-more :loadmore="load_more1"></load-more>
						</view>
					</template>
					<!--无数据-->
					<empty v-else no-full type="noData"></empty>
				</view>

				<!--往期回顾-->
				<view class="body-item" v-if="active === 2">
					<template v-if="datalist2 && datalist2.length > 0 ">
						<block v-for="(item,index) in datalist2" :key="index">
							<race-list :img="item.image" statu="3" :title="item.title" :time="item.game_start_time"
								@click="clickdet(item.status,item)">
							</race-list>
						</block>
						<!-- 上拉加载 -->
						<view class="det-con-more">
							<load-more :loadmore="load_more2"></load-more>
						</view>
					</template>
					<!--无数据-->
					<empty v-else no-full type="noData"></empty>
				</view>

				<!--赛事介绍-->
				<view class="body-item" v-if="active === 3">
					<template v-if="datalist3 && datalist3.length > 0 ">
						<block v-for="(item,index) in datalist3" :key="index">
							<view class="list-li"
								:style="{'border-bottom':datalist3.length===index+1?'none':'1rpx solid #ddd'}">
								<company-list :img="item.img" :title="item.title" :time="item.create_time"
									:statu="item.statu" @click="clickcomp('ssjs',item)"></company-list>
							</view>
						</block>
						<!-- 上拉加载 -->
						<view class="det-con-more">
							<load-more :loadmore="load_more3"></load-more>
						</view>
					</template>
				</view>

				<!--关于我们-->
				<view class="body-item" v-if="active === 4">
					<template v-if="datalist4 && datalist4.length > 0 ">
						<block v-for="(item,index) in datalist4" :key="index">
							<view class="list-li"
								:style="{'border-bottom':datalist4.length===index+1?'none':'1rpx solid #ddd'}">
								<company-list :img="item.img" :title="item.title" :time="item.create_time"
									:statu="item.statu" @click="clickcomp('gywm',item)"></company-list>
							</view>
						</block>
						<!-- 上拉加载 -->
						<view class="det-con-more">
							<load-more :loadmore="load_more4"></load-more>
						</view>
					</template>
					<!--无数据-->
					<empty v-else no-full type="noData"></empty>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import wSearch from "@/components/w-search/w-search.vue"
	import wSwiper from "@/components/w-swiper/w-swiper.vue"
	// #ifdef MP-WEIXIN
	import wNavStatuBar from "@/components/w-nav-statu-bar/w-nav-statu-bar.vue"
	// #endif
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	import raceList from "@/pages/index/components/race_list.vue"
	import companyList from "@/pages/index/components/company_list.vue"
	import loadMore from '@/components/uni-load-more/load-more.vue'
	import {
		getcitys,
		getcarousels,
		getgamelists,
		getarticles, //文章列表
		getcompanyinfos, //集团信息
		getcompanyarticles //关于我们
	} from '@/common/api.js'
	export default {
		components: {
			wSearch,
			wSwiper,
			// #ifdef MP-WEIXIN
			wNavStatuBar,
			// #endif
			uniSwiperDot,
			raceList,
			companyList,
			loadMore
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				statusBarHeight: '', //状态栏高度
				navHeight: '', //标题栏高度
				city: '厦门', //城市
				// #endif
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_more2: '', //下拉加载文字
				load_more3: '', //下拉加载文字
				load_more4: '', //下拉加载文字
				load_sta: false,
				info: [],
				current: 0,
				mode: 'dot',
				dotsStyles: {
					backgroundColor: '#fff',
					border: '1px #fff solid',
					color: '#fff',
					selectedBackgroundColor: '#02BB6F',
					selectedBorder: '1px solid #02BB6F'
				},
				swiperDotIndex: 0,
				active: 1, //tab导航
				lists: [],
				datalist1: [],
				datalist2: [],
				datalist3: [],
				datalist4: [],
				code: '',
				formData: {
					city_id: '15629',
					type: '2'
				},
				formData3: {
					page: 1,
					limit: 10
				},
				formData4: {
					page: 1,
					limit: 10
				}
			}
		},
		computed: {
			...mapState(['hasLogin', 'indexSub'])
		},
		onLaunch() {

		},
		onShow() {
			//获取当前城市
			let city = uni.getStorageSync('sel_city')
			if (city) {
				this.city = city.name;
				this.formData.city_id = city.id;
			} else {
				this.getLocation();
			}
			this.getdata1(this.formData);
			this.getbanner();
			this.getcom1(this.formData3);
			this.getcom2(this.formData4);

		},
		onLoad(option) {
			// #ifdef MP-WEIXIN
			//获取状态栏、标题栏高度
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight;
					let menu = wx
				.getMenuButtonBoundingClientRect(); //获取获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。（top表示上边框到手机顶部的距离 bottom是下边框到手机顶部的距离）
					this.navHeight = (menu.top - res.statusBarHeight) * 3 + menu.height
				}
			});
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
			//#endif
		},
		//发送给朋友
		onShareAppMessage(res) {
			// 此处的distSource为分享者的部分信息，需要传递给其他人
			let distSource = uni.getStorageSync('distSource');
			if (distSource) {
				return {
					title: '欢迎使用穿越小程序',
					type: 0,
					path: '/pages/index/index?id=' + distSource,
					summary: "",
					imageUrl: ""
				}
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			let distSource = uni.getStorageSync('distSource');
			if (distSource) {
				return {
					title: '欢迎使用穿越小程序',
					type: 0,
					query: 'id=' + distSource,
					summary: "",
					imageUrl: ""
				}
			}
		},
		methods: {
			...mapMutations(['setIndexSub']),
			tocity() {
				uni.navigateTo({
					url: `/pages/index/cityList?city=${this.city}`
				})
			},
			// #ifdef MP-WEIXIN
			getLocation() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: (res) => {
						let _self = this
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.request({
							header: {
								"Content-Type": "application/text"
							},
							//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
							url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
								res.longitude + ',' + res.latitude +
								'&key=4e05aff7258c0b784f5df8de49d23740&radius=1000&extensions=all',
							success(res2) {
								if (res2.statusCode === 200) {
									_self.city = res2.data.regeocode.addressComponent.city
									getcitys().then(res3 => {
										console.log(444,res3)
										if (res3.code === 2000) {
											if (res3.data && res3.data.length > 0) {
												let nocity = '';
												res3.data.forEach(item => {
													if (item.name === res2.data.regeocode.addressComponent.city) {
														nocity = '1' ;
														_self.formData.city_id = item.id;
														uni.setStorageSync('sel_city',item);
													}
												})
												if(nocity === ''){
													uni.showToast({
														title:'当前城市未创建赛事！',
														icon:'none',
														duration:2000
													})
													_self.formData.city_id = res3.data[0].id;
													uni.setStorageSync('sel_city',res3.data[0]);
												}
											}
										}
									})

								} else {
									console.log("获取位置信息失败，请重试！")
								}
							}
						});
					}
				});
			},
			//#endif
			//下拉加载
			loadmore() {
				console.log('下拉加载');
				let _self = this;
				_self.load_sta = true;
				if (_self.active === 1) {
					_self.formData.page++;
					this.getdata1();
				} else if (_self.active === 2) {
					_self.formData.page++;
					this.getdata2();
				} else if (_self.active === 3) {
					_self.formData3.page++;
					this.getcom1(_self.formData3);
				} else if (_self.active === 4) {
					_self.formData4.page++;
					this.getcom2(_self.formData4);
				}
			},
			//获取banner
			getbanner() {
				getcarousels().then(resdata => {
					if (resdata.data && resdata.data.length > 0) {
						let lists = []
						resdata.data.forEach(item => {
							let list = {
								url: ''
							}
							list.url = item;
							lists.push(list);
						})
						this.info = lists;
					}
				})
			},
			//获取文章列表
			getcom1(formData) {
				getarticles(formData).then(res2 => {
					let datalist = res2.data;
					if (datalist && datalist.length > 0) {
						datalist.forEach(item => {
							item.create_time = item.create_time.split(' ')[0]
						})
						if (this.load_sta) {
							if (datalist && datalist.length < 10) {
								this.load_more3 = '没有更多了';
								this.datalist3 = this.datalist3.concat(datalist);
							} else {
								this.load_more3 = '加载中...';
								this.datalist3 = this.datalist3.concat(datalist);
							}
						} else {
							if (datalist && datalist.length < 10) {
								this.load_more3 = '没有更多了'
								this.datalist3 = datalist
							} else {
								this.load_more3 = '加载中...';
								this.datalist3 = datalist;
							}
						}
					}
				})
			},
			//获取关于我们
			getcom2(formData) {
				getcompanyarticles(formData).then(res2 => {
					let datalist = res2.data;
					if (datalist && datalist.length > 0) {
						datalist.forEach(item => {
							item.create_time = item.create_time.split(' ')[0]
						})
						if (this.load_sta) {
							if (datalist && datalist.length < 10) {
								this.load_more4 = '没有更多了';
								this.datalist4 = this.datalist4.concat(datalist);
							} else {
								this.load_more4 = '加载中...';
								this.datalist4 = this.datalist4.concat(datalist);
							}
						} else {
							if (datalist && datalist.length < 10) {
								this.load_more4 = '没有更多了';
								this.datalist4 = datalist;
							} else {
								this.load_more4 = '加载中...';
								this.datalist4 = datalist;
							}
						}
					}
				})
			},
			//获取当前比赛数据
			getdata1(formData) {
				getgamelists(formData).then(res => {
					let datalist = res.data
					if (datalist && datalist.length > 0) {
						if (datalist && datalist.length > 0) {
							datalist.forEach(item => {
								this.$set(item, 'image', item.img[0])
							})
						}
						if (this.load_sta) {
							if (datalist && datalist.length < 10) {
								this.load_more1 = '没有更多了';
								this.datalist1 = this.datalist1.concat(datalist);
							} else {
								this.load_more1 = '加载中...';
								this.datalist1 = this.datalist1.concat(datalist);
							}
						} else {
							if (datalist && datalist.length < 10) {
								this.load_more1 = '没有更多了';
								this.datalist1 = datalist;
							} else {
								this.load_more1 = '加载中...';
								this.datalist1 = datalist;
							}
						}
					}
				})
			},
			//获取往期回顾数据
			getdata2(formData) {
				getgamelists(formData).then(res => {
					let datalist = res.data
					if (datalist && datalist.length > 0) {
						if (datalist && datalist.length > 0) {
							datalist.forEach(item => {
								this.$set(item, 'image', item.img[0])
							})
						}
						if (this.load_sta) {
							if (datalist && datalist.length < 10) {
								this.load_more2 = '没有更多了';
								this.datalist2 = this.datalist2.concat(datalist);
							} else {
								this.load_more2 = '加载中...';
								this.datalist2 = this.datalist2.concat(datalist);
							}
						} else {
							if (datalist && datalist.length < 10) {
								this.load_more2 = '没有更多了';
								this.datalist2 = datalist;
							} else {
								this.load_more2 = '加载中...';
								this.datalist2 = datalist;
							}
						}
					}
				})
			},
			change(e) {
				this.current = e.detail.current
			},
			handleActive(e) {
				let _self = this;
				_self.active = e;
				uni.setStorageSync('setIndexSub', e)
				_self.load_sta = false;
				if (_self.active === 1) {
					_self.formData.type = '2'
					_self.getdata1(_self.formData);
				}
				if (_self.active === 2) {
					_self.formData.type = '3'
					_self.getdata2(_self.formData);
				}
				if (_self.active === 3) {
					let formData = _self.formData3
					_self.getcom1();
				}
				if (_self.active === 4) {
					let formData = _self.formData4
					_self.getcom2();
				}
			},
			//跳转比赛详情
			clickdet(type, item) {
				uni.navigateTo({
					url: `/pages/index/race_detail?type=${type}&data=${JSON.stringify(item)}`
				})
			},
			//跳转比赛详情报名
			signUp(type, item) {
				uni.navigateTo({
					url: `/pages/index/race_detail?type=${type}&data=${JSON.stringify(item)}`
				})
			},
			//跳转集团详细
			clickcomp(type, item) {
				uni.navigateTo({
					url: `/pages/index/company_detail?type=${type}&item=${JSON.stringify(item)}`
				})
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			/* if (this.$refs.indexPage) {
				this.$refs.indexPage.getData()
				console.log(1231)
			} */
		}
	}
</script>

<style lang="scss">
	.page-content {
		height: 100%; //calc(100%); //var(--status-bar-height)
		width: 100vw;
	}

	.page-content2 {
		height: calc(100% - 216rpx);
		width: 100vw;
		display: flex;
		flex-direction: column;
	}

	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
	}

	.index-header {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 450rpx;
		background-color: #f5f5f5;
		position: relative;

		.header-swiper {
			.swiper-box {
				height: 380rpx;
			}

			.swiper-item {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				height: 380rpx;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #999;
				color: #fff;
			}

			.image {
				width: 750rpx;
			}
		}

		.search {
			display: flex;
			position: absolute;
			left: 30rpx;
			top: 30rpx;
			right: 30rpx;
			height: 56rpx;
			border-radius: 28rpx;
			background-color: #eee;
			padding: 0 30rpx;

			.search-ico,
			.search-txt {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
				line-height: 56rpx;
				margin-right: 15rpx;
			}
		}

		.nav {
			height: 100rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			text-align: center;
			font-size: 28rpx;
			color: #999;

			.nav-item {
				flex: 1;
				position: relative;

				&::after {
					content: '';
					width: 0;
					height: 8rpx;
					background-color: #02BB6F;
					border-radius: 4px;
					position: absolute;
					left: 50%;
					bottom: -12rpx;
					transform: translateX(-50%);
					transition: .3s;
				}

				&.active {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;

					&::after {
						width: 60rpx;
					}
				}
			}
		}
	}

	.page-body {
		height: calc(100% - 450rpx);
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;

		.body-item {
			height: calc(100% - 50rpx);
			margin: 20rpx 32rpx 30rpx 32rpx;

			.list-li {
				display: flex;
				margin-bottom: 34rpx;
				padding-bottom: 34rpx;
			}
		}
	}
</style>
